<script setup lang="ts">
const form = ref({
  name: '',
  phone: '',
  email: '',
  company: '',
  message: '',
})

function submitForm() {
  // Form submission logic here
  alert('感谢您的咨询，我们将在24小时内与您联系！')

  // Reset form
  form.value = {
    name: '',
    phone: '',
    email: '',
    company: '',
    message: '',
  }
}
</script>

<template>
  <div class="pt-20">
    <!-- Contact Header -->
    <section class="bg-gradient-to-r text-white section-padding from-blue-600 to-purple-600">
      <div class="container-max text-center">
        <h1 class="text-4xl font-bold mb-6 md:text-5xl">
          联系我们
        </h1>
        <p class="text-xl mx-auto max-w-3xl">
          24小时技术对接，应急备件快速协调，为您提供专业的服务支持
        </p>
      </div>
    </section>

    <!-- Contact Content -->
    <section class="section-padding">
      <div class="container-max">
        <div class="gap-12 grid lg:grid-cols-2">
          <!-- Contact Form -->
          <div class="p-8 rounded-lg bg-white shadow-lg">
            <h2 class="text-2xl title-gradient font-bold mb-6">
              在线咨询
            </h2>
            <form class="space-y-6" @submit.prevent="submitForm">
              <div class="gap-4 grid md:grid-cols-2">
                <div>
                  <label class="text-sm text-gray-700 font-medium mb-2 block">姓名</label>
                  <input
                    v-model="form.name"
                    type="text"
                    class="px-4 py-3 border border-gray-300 rounded-lg w-full focus:border-transparent focus:ring-2 focus:ring-blue-600"
                    placeholder="请输入您的姓名"
                  >
                </div>
                <div>
                  <label class="text-sm text-gray-700 font-medium mb-2 block">电话</label>
                  <input
                    v-model="form.phone"
                    type="tel"
                    class="px-4 py-3 border border-gray-300 rounded-lg w-full focus:border-transparent focus:ring-2 focus:ring-blue-600"
                    placeholder="请输入您的电话"
                  >
                </div>
              </div>
              <div>
                <label class="text-sm text-gray-700 font-medium mb-2 block">邮箱</label>
                <input
                  v-model="form.email"
                  type="email"
                  class="px-4 py-3 border border-gray-300 rounded-lg w-full focus:border-transparent focus:ring-2 focus:ring-blue-600"
                  placeholder="请输入您的邮箱"
                >
              </div>
              <div>
                <label class="text-sm text-gray-700 font-medium mb-2 block">公司</label>
                <input
                  v-model="form.company"
                  type="text"
                  class="px-4 py-3 border border-gray-300 rounded-lg w-full focus:border-transparent focus:ring-2 focus:ring-blue-600"
                  placeholder="请输入您的公司名称"
                >
              </div>
              <div>
                <label class="text-sm text-gray-700 font-medium mb-2 block">咨询内容</label>
                <textarea
                  v-model="form.message"
                  rows="5"
                  class="px-4 py-3 border border-gray-300 rounded-lg w-full focus:border-transparent focus:ring-2 focus:ring-blue-600"
                  placeholder="请详细描述您的需求或问题"
                />
              </div>
              <button type="submit" class="btn-primary w-full">
                提交咨询
              </button>
            </form>
          </div>

          <!-- Contact Info -->
          <div>
            <div class="mb-8 p-8 rounded-lg bg-white shadow-lg">
              <h2 class="text-2xl title-gradient font-bold mb-6">
                联系信息
              </h2>
              <div class="space-y-6">
                <div class="flex items-start">
                  <div class="mr-4 rounded-lg bg-blue-100 flex h-12 w-12 items-center justify-center">
                    <span class="text-blue-600">📧</span>
                  </div>
                  <div>
                    <h3 class="text-gray-900 font-bold mb-1">
                      邮箱地址
                    </h3>
                    <p class="text-gray-600">
                      info@xuixing-tech.com
                    </p>
                    <p class="text-gray-600">
                      sales@xuixing-tech.com
                    </p>
                  </div>
                </div>

                <div class="flex items-start">
                  <div class="mr-4 rounded-lg bg-green-100 flex h-12 w-12 items-center justify-center">
                    <span class="text-green-600">📞</span>
                  </div>
                  <div>
                    <h3 class="text-gray-900 font-bold mb-1">
                      联系电话
                    </h3>
                    <p class="text-gray-600">
                      400-123-4567
                    </p>
                    <p class="text-gray-600">
                      0512-1234-5678
                    </p>
                  </div>
                </div>

                <div class="flex items-start">
                  <div class="mr-4 rounded-lg bg-purple-100 flex h-12 w-12 items-center justify-center">
                    <span class="text-purple-600">📍</span>
                  </div>
                  <div>
                    <h3 class="text-gray-900 font-bold mb-1">
                      公司地址
                    </h3>
                    <p class="text-gray-600">
                      江苏省苏州市工业园区
                    </p>
                    <p class="text-gray-600">
                      科技创新大厦A座20层
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Service Features -->
            <div class="bg-gradient-to-r text-white p-8 rounded-lg from-blue-600 to-purple-600">
              <h3 class="text-xl font-bold mb-4">
                服务特色
              </h3>
              <ul class="space-y-3">
                <li class="flex items-center">
                  <span class="text-sm mr-3 rounded-full bg-white/20 flex h-6 w-6 items-center justify-center">✓</span>
                  24小时技术对接服务
                </li>
                <li class="flex items-center">
                  <span class="text-sm mr-3 rounded-full bg-white/20 flex h-6 w-6 items-center justify-center">✓</span>
                  应急备件快速协调
                </li>
                <li class="flex items-center">
                  <span class="text-sm mr-3 rounded-full bg-white/20 flex h-6 w-6 items-center justify-center">✓</span>
                  非标件专业定制化
                </li>
                <li class="flex items-center">
                  <span class="text-sm mr-3 rounded-full bg-white/20 flex h-6 w-6 items-center justify-center">✓</span>
                  质保维护全程跟踪
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
